<template>
    <ul class="user-abr">
        <li>
            <div class="international-action-icon">简体中文</div>
        </li>
        <li class="user-action-list">
            <div class="user-action-icon" @click="loginOut"></div>
        </li>
    </ul>
</template>

<script lang="ts" setup>
import { useRouter } from 'vue-router';
import { deleteCookie } from '@/utils/utils';

const router = useRouter();
function loginOut() {
    deleteCookie('SaaS_Token');
    router.push({ name: '/login' });
}
</script>

<style scoped>
.user-abr {
    display: flex;
    gap: 28px;
}

.user-abr > li {
    display: flex;
    align-items: center;
}

.international-action-icon {
    padding-left: 22px;
    height: 16px;
    line-height: 16px;
    color: var(--font-color-dim);
    font-size: 12px;
    cursor: pointer;
}

.user-action-icon {
    width: 28px;
    height: 28px;
    background: url('~@/assets/image/user@2x.png') no-repeat center center / 28px;
    cursor: pointer;
}
</style>
